<style>
div#crosshair {
    position: absolute;
    top: 200px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
    background: url(<?php echo $baseurl?>public/theme/analytics/images/crosshair.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="inside">
  <aside class="navigationPanel">
     
     <div class="tree pagesLinks">
        <ul>
           <ul>
			  <li> <a href="<?php echo $baseurl.'campaign/them-dia-diem.html'?>" class="active"><i class="fa fa-star"></i>Thêm địa điểm</a> </li>
              <li> <a href="<?php echo $baseurl.'campaign/dia-diem.html'?>" class=""><i class="fa fa-star"></i> Địa điểm</a> </li>
			   <li> <a href="<?php echo $baseurl.'campaign/modem.html'?>"><i class="fa fa-star"></i> Danh sách modem</a> </li>
              <li> <a href="<?php echo $baseurl.'campaign/tat-ca.html'?>"><i class="fa fa-star"></i> Tất cả chiến dịch</a> </li>
              <li> <a href="<?php echo $baseurl.'campaign/cho-duyet.html'?>"><i class="fa fa-star"></i> Chiến dịch chờ duyệt</a> </li>
              <li> <a href="<?php echo $baseurl.'campaign/dang-chay.html'?>"><i class="fa fa-star"></i> Chiến dịch đang chạy</a> </li>
			  <li> <a href="<?php echo $baseurl.'campaign/dang-tam-dung.html'?>"><i class="fa fa-star"></i> Chiến dịch đang tạm dừng</a></li>
			  <li> <a href="<?php echo $baseurl.'campaign/da-huy.html'?>"><i class="fa fa-star"></i> Chiến dịch đã hủy</a> </li>
           </ul>
        </ul>
     </div>
  </aside>
  <div class="contentPanel">
     <div class="pages" id="profile">
        <div class="profile-edit-form">
              <?php $att = array('id' => 'frm-profileEdit-editForm', 'class' => 'profileForm');echo form_open('', $att);?>
              <div class="contentBox switcher" style="height: 100%;">
                 <h3>Thêm địa điểm</h3>
                 <?php if(validation_errors()):?>
                    <h4>
                        <p><?php echo validation_errors(); ?></p>
                    </h4>
                    <?php endif;?>
                 <div class="contentSwitcher hide" style="display: block;">
                    <div class="insideContentBox">
                      
                       <label for="frm-fullname">Tên cửa hàng/nhà hàng (*):</label> 
                       <input type="text" name="shopName" value="" class="ipt" autocomplete="off" id="frm-username" placeholder="Tên cửa hàng/nhà hàng">
					    <div id="maps_gg" style="display:none;
position: absolute;
height: 402px;
width: 400px;
background-color: #fff;;
right: 46px;
border: 2px solid rgb(74, 74, 55);">
						<div onclick="close_maps()" id="maps_close" style="height: 0px;
float: right;
color: rgb(54, 54, 144);
cursor: pointer;
margin-right: 5px;">Close</div>
						<div style="height: 378px;
width: 396px;
background-color: blue;
margin-top: 20px;border-top: 1px solid #D3B5B5;" id="map_canvas"> </div><div id="crosshair"></div>
					   </div>
                       <label for="frm-fullname">Địa chỉ (*):</label> 
                       <input type="text" name="address" value="" class="ipt" autocomplete="off" id="address" placeholder="Địa chỉ">
                       <input type="hidden" id="click_kiemtra" value="" />
					   <span onclick="geocode()"  style="height: 20px;top: 5px;width: 30px;position: relative;cursor: pointer;rgb(202, 84, 84)" id="get_location">Get vị trí</span>
					  
					   <label for="frm-fullname">Số điện thoại (*):</label> 
                       <input type="text" name="mobile" value="" class="ipt" autocomplete="off" id="frm-mobile" placeholder="Số điện thoại">
                       
					   <label for="frm-fullname">Địa chỉ dải mạng (*):</label> 
                       <input type="text" name="ip" value="" class="ipt" autocomplete="off" id="frm-ip" placeholder="Địa chỉ dải mạng">
                       
					   <label for="frm-fullname">Kinh độ latitude (*):</label> 
                       <input type="text" name="lat" value="" class="ipt" autocomplete="off" id="frm-lat" placeholder="Kinh độ latitude">
					   <label for="frm-fullname">Vĩ độ longitude (*):</label> 
                       <input type="text" name="long" value="" class="ipt" autocomplete="off" id="frm-long" placeholder="Vĩ độ longitude">
					   
                       <label for="frm-address">Chọn modem (*):</label> 
                       <div class="custom-line" style="width: 350px;">
                           <span>
                               <select style="width: 350px;" name="nas_id"><?php echo $getListModem;?></select>
                           </span>
                       </div>
                       <div class="lineButton">
                           <button type="submit" class="applyBtn btn btn-small btn-primary"><span>Lưu lại</span></button>
                           <button type="button" onclick="window.location='<?php echo $baseurl.'campaign/dia-diem.html'?>'" class="cancelBtn btn btn-default btn-small"><span>Hủy bỏ</span></button>
                       </div>
                    </div>
                 </div>
              </div>
           </form>
        </div>
     </div>
  </div>
</div> 
<style>
body.flash-permanent .contentPanel {
    padding: 100px 0px 18px !important;
}
.cfr {
    line-height: 1px !important;padding: 15px 79px 0px 12px !important;height: 37px !important;
}
</style>
<script>
$('#address').click(function(){
    $('#maps_gg').css('display','block');
});

initialize();

var map;
  var geocoder;
  var centerChangedLast;
  var reverseGeocodedLast;
  var currentReverseGeocodeResponse;
  function initialize() {
    var latlng = new google.maps.LatLng(null,null);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    setupEvents();
    centerChanged();
  }
  function setupEvents() {
    reverseGeocodedLast = new Date();
    centerChangedLast = new Date();
    setInterval(function() {
      if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
        if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
          reverseGeocode();
      }
    }, 1000);
    google.maps.event.addListener(map, 'zoom_changed', function() {
      document.getElementById("zoom_level").innerHTML = map.getZoom();
    });
    google.maps.event.addListener(map, 'center_changed', centerChanged);
    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
       map.setZoom(map.getZoom() + 1);
    });
  }
  function getCenterLatLngText() {
    return  map.getCenter().lat(); 
  }
    function getCenterLatLngText2() {
    return   map.getCenter().lng() ;
  } 
  function centerChanged() {
    centerChangedLast = new Date();
    var latlng = getCenterLatLngText();
    var latlng2 = getCenterLatLngText2();
    //document.getElementById('latlng').innerHTML = latlng;
    $("#frm-lat").val(latlng);
    $("#frm-long").val(latlng2);
    document.getElementById('formatedAddress').innerHTML = '';
    currentReverseGeocodeResponse = null;
  }
  function reverseGeocode() {
    reverseGeocodedLast = new Date();
    geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
  }
  function reverseGeocodeResult(results, status) {
    currentReverseGeocodeResponse = results;
    if(status == 'OK') {
      if(results.length == 0) {
        document.getElementById('formatedAddress').innerHTML = 'None';
      } else {
        document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
      }
    } else {
      document.getElementById('formatedAddress').innerHTML = 'Error';
    }
  }
  function geocode() {
    var address = document.getElementById("address").value;
	
    geocoder.geocode({
      'address': address,
      'partialmatch': true}, geocodeResult);
	  $('#maps_gg').css('display','block');
      $("#click_kiemtra").val('1');// set input hidden #click_kiemtra value=1
  }
  function geocodeResult(results, status) {
    if (status == 'OK' && results.length > 0) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Không tồn tại địa điểm trên, vui lòng điền lại địa chỉ!");return false;
    }
  }
  function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
    });
    var text = 'Lat/Lng: ' + getCenterLatLngText();
    if(currentReverseGeocodeResponse) {
      var addr = '';
      if(currentReverseGeocodeResponse.size == 0) {
        addr = 'None';
      } else {
        addr = currentReverseGeocodeResponse[0].formatted_address;
      }
      text = text + '<br>' + 'address: <br>' + addr;
    }
    var infowindow = new google.maps.InfoWindow({ content: text });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
  function close_maps(){
	  $('#maps_gg').css('display','none');
  }
</script>